<template>
  <div class="wrap">
    <el-row :gutter="20" style="margin-bottom: 26px;">
      <el-col :span="20"><div class="grid-content bg-purple" />
        <el-card class="box-card">
          <div style="font-size: 20px; color: rgb(24, 144, 255);">
            进件管理系统欢迎您！
          </div>
          <br>
          <div>
            {{ rolesText }} - {{ getTimeGreeting() }}
          </div>
          <br>
          <div>上次登录时间： {{ time }}</div>

        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10"><div class="grid-content bg-purple">
        <el-card class="box-card" body-style="padding: 0px">
          <div slot="header" class="clearfix">
            <span>新增订单数量</span>
          </div>
          <div id="orderCount" style="width: 100%; height: 400px;" />
        </el-card>
      </div>
      </el-col>
      <el-col :span="10"><div class="grid-content bg-purple">
        <el-card class="box-card" body-style="padding: 0px">
          <div slot="header" class="clearfix">
            <span>订单统计</span>
          </div>
          <!-- <div id="allCount" style="width: 100%; height: 400px;" /> -->
          <div class="check-list">
            <div v-for="(item, index) in nodeCheckConfig" :key="index" class="check-item" @click="onCheckItem(item)">
              <i :class="item.icon" style="font-size: 20px;" />
              <div class="check-inner">
                <div class="check-num">数量：{{ item.num || 0 }}</div>
                <div class="check-title">{{ item.title }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
import { mapState } from 'vuex'
export default {
  name: 'Index',
  data() {
    return {
      // 版本号
      version: '3.8.9',
      time: '',
      rolesText: '',
      nodeCheckConfig: [
        {
          title: '新单预审',
          icon: 'el-icon-s-claim',
          num: 0,
          id: 1,
          path: 'pre-check'
        },
        {
          title: '额度授信',
          num: 0,
          id: 2,
          icon: 'el-icon-s-shop',
          path: 'erdushouxin'
        },
        {
          title: '绑卡审核',
          num: 0,
          id: 3,
          icon: 'el-icon-notebook-2',
          path: 'bind-card'
        }, {
          title: '客服审核',
          num: 0,
          id: 4,
          icon: 'el-icon-s-custom',
          path: 'custum-check'
        }, {
          title: '合同审核',
          num: 0,
          id: 5,
          icon: 'el-icon-postcard',
          path: 'sin-constract'
        }, {
          title: '派单审核',
          num: 0,
          id: 6,
          icon: 'el-icon-water-cup',
          path: 'order-check'
        }, {
          title: '施工审核',
          num: 0,
          id: 7,
          icon: 'el-icon-potato-strips',
          path: 'sigong-check'
        }, {
          title: '请款审核',
          num: 0,
          id: 8,
          icon: 'el-icon-folder-remove',
          path: 'moeny-check'
        }, {
          title: '出款审核',
          num: 0,
          id: 9,
          icon: 'el-icon-takeaway-box',
          path: 'out/money-check'
        }, {
          title: '已完成订单',
          num: 0,
          id: 10,
          icon: 'el-icon-folder-checked',
          path: 'sett-check'
        }, {
          title: '待处理订单',
          num: 0,
          id: 11,
          icon: 'el-icon-folder-checked',
          path: '/await-order'
        },
        {
          title: '已结束',
          num: 0,
          id: 12,
          icon: 'el-icon-s-marketing',
          path: '/ending-order'
        }
      ]
    }
  },
  computed: {
    ...mapState(['roles'])
  },
  created() {
    this.getPreTime()
    this.getUserRole()
    this.getOrderCount()
  },
  mounted() {
    this.orderCount()
    this.allCount()
  },
  methods: {
    /** 获取上次登录的时间 */
    getPreTime() {
      // http://localhost:1024/dev-api/logininfor/list?pageNum=1&pageSize=1
      // http://localhost:1024/dev-api/monitor/logininfor/list?pageNum=1&pageSize=10
      request({ url: '/monitor/logininfor/list?pageNum=1&pageSize=1', method: 'get' }).then(res => {
        this.time = res.rows[0]?.loginTime
      })
    },
    getOrderCount() {
      request({ url: 'system/apply/queryDataStatistics', method: 'get' }).then(res => {
        if (res.data) {
          const node = JSON.parse(JSON.stringify(this.nodeCheckConfig))
          this.nodeCheckConfig = node.map((item) => {
            if (item.id === 10) {
              item.num = res.data.completeNumber
            } else if (item.id === 11) {
              item.num = res.data.ProcessingNumber
            } else if (item.id === 12) {
              item.num = res.data.endNumber
            } else {
              const find = res.data.configList.find(it => it.approvalLevel == item.id)
              item.num = find?.count
            }
            return item
          })
        }
      })
    },
    onCheckItem(item) {
      // 基本跳转
      this.$router.push(item.path)
    },
    getTimeGreeting() {
      const hour = new Date().getHours()
      if (hour >= 5 && hour < 12) {
        return '上午好！🌞'
      } else if (hour >= 12 && hour < 14) {
        return '中午好！🍚'
      } else if (hour >= 14 && hour < 18) {
        return '下午好！☕'
      } else if (hour >= 18 && hour < 24) {
        return '晚上好！🌙'
      } else {
        return '凌晨好！🌜'
      }
    },

    getUserRole() {
      Promise.all(
        [
          request({ url: '/getInfo', method: 'get' }),
          request({ url: 'system/role/list?pageNum=1&pageSize=1000', method: 'get' })
        ]
      ).then(([d0, d1]) => {
        if (d0.code === 200 && d1.code === 200) {
          this.rolesText = d1.rows.filter(item => d0.roles.includes(item.roleKey)).map(item => item.roleName).join(',')
        }
        // console.log(res)
      })
      // http://localhost:1024/dev-api/system/role/list?pageNum=1&pageSize=10
    },

    orderCount() {
      var chartDom = document.getElementById('orderCount')
      var myChart = echarts.init(chartDom)
      myChart.setOption({
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            itemStyle: {
              color: 'rgb(24, 144, 255)'
            },
            data: [120, 200, 150, 80, 70, 110, 130],
            type: 'bar'
          }
        ]
      })
      window.addEventListener('resize', myChart.resize)
    },

    allCount() {
      var chartDom = document.getElementById('allCount')

      var myChart = echarts.init(chartDom)
      const option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '5%',
          left: 'center'
        },
        series: [
          {

            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: '订单数量' },
              { value: 735, name: '员工数量' },
              { value: 580, name: '产品数量' },
              { value: 484, name: 'Union Ads' },
              { value: 300, name: 'Video Ads' }
            ]
          }
        ]

      }
      myChart.setOption(option)
      window.addEventListener('resize', myChart.resize)
    }
    // goTarget(href) {
    //   window.open(href, '_blank')
    // }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  width: 100%;
  height: 100vh;
  background-color: #f5f6fa;
  padding: 24px;
}

.check-list {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px;
}

.check-item {
  width: 25%;
  padding: 15px 10px;
  border-radius: 10px;
  background-color: rgb(217, 236, 255);
  color: #409EFF;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;

}

.check-title {
  font-size: 12px;
  color: #aaa;
}

.check-num {
  font-size: 13px;
}

.check-inner {
}
</style>

